<template>
	<view class="content">
		<door-navbar :isShowRight='true' :bgColor="'#333'" :is3orf='true'></door-navbar>
		<view class="header-box">
			<view class="header-box-bg">
				<view class="header-box-bg-btn">
					<view style="color:#999;font-size: 24rpx;">余额 {{myRemainder}}（元）</view>				
				</view>
			</view>
		</view>
		<view style="margin-top:10px;">
			<view
				style="background-color: #fff;width: 686rpx;color: #333;margin: 0 auto;font-weight: 900;padding-left: 60rpx;padding-top: 20rpx;">
				账单明细</view>
			<scroll-view style="width: 686rpx; height:50vh;background-color: #fff;margin: 0 auto;" scroll-y="true"
				:refresher-enabled="false" :refresher-threshold="100" refresher-background="#f9f9f9">
				<view class="swiper">
					<door-empty v-if="dataList.length == 0" text="暂无资金记录"></door-empty>
					<view v-for="(item, index) in dataList" :key="index">
						<view style="padding: 20rpx;">
							<view style="display: flex;align-items: center;justify-content: space-between;">
								<text style="font-size: 28rpx;font-weight: 800;">{{item.amount}} 元</text>
							</view>
							<view
								style="display: flex;align-items: center;justify-content: space-between;margin-top: 20rpx;border-bottom: 1px solid #eee;padding-bottom: 32rpx;">
								<text style="font-size: 24rpx;color: #999;">{{item.createTime}}</text>
								<!--<view v-if="item.balance<0" style="font-size: 24rpx;color: #999;padding: 6rpx 24rpx;background-color: #eee;border-radius: 30rpx;">出账</view>-->
								<view style="font-size: 24rpx;color: #fff;padding: 6rpx 24rpx;background-color: #f2565c;border-radius: 30rpx;">{{item.remark}}</view>
							</view>
						</view>						
					</view>
				</view>
			</scroll-view>
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: 0,
				payType: 1,				
				userInfo: '',
				psettle: '',
				dataList: [],
				triggered: false,
				myRemainder: 0
			};
		},
		onLoad() {
			this.getUserInfo()
			this.getList()
			this._freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 1000)
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			async getList() {
				let userId = JSON.parse(uni.getStorageSync('userInfo')).userId;
				let phone = JSON.parse(uni.getStorageSync('userInfo')).phone;
				await uni.request({
					method: 'post',
					url: `${this.$webBaseUrl}/api/nft-school/userApp/getPayRecords`,
					timeout: 30000,
					header: {
						'Content-Type': 'application/json',						
						"Authorization": uni.getStorageSync('token')						
					},
					data: {
						pageSize: 9999,
						pageNo: 1,
						studentId: userId,
						phone: phone
					},
					success: res => {
						this.dataList = this.dataList.concat(res.data.data.pageData)
					},
					fail: err => {
						console.log(err);
					}
				})
				await uni.request({
					method: 'get',
					url: `${this.$webBaseUrl}/api/nft-school/userApp/getPayRemainder`,
					timeout: 30000,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						"Authorization": uni.getStorageSync('token')						
					},
					data: {
						phone: phone
					},
					success: res => {
						if (res.data!=null&&res.data.data&&res.data.data.remainder) {
							this.myRemainder = res.data.data.remainder;
						}
					},
					fail: err => {
						console.log(err);
					}
				})
			},
			getUserInfo() {
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			},		
			pageUrl(url) {
				uni.navigateTo({
					url: `/pages${url}`
				})
			},
		}
	}
</script>
<style>
	* {
		margin: 0;
		padding: 0;
	}
</style>
<style lang="scss">
	.content {
		// padding-top: 128rpx;
		.header-box {
			background-color: #333;
			width: 100vw;
			height: 120px;
			&-bg {
				position: relative;
				top: 45px;
				left: calc(50% - 343rpx);
				width: 686rpx;
				//height: 462rpx;
				background-color: #fff;
				border-radius: 20rpx;

				&-left {
					position: absolute;
					top: 332rpx;
					left: -18rpx;
					background-color: #f9f9f9;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}

				&-right {
					position: absolute;
					top: 332rpx;
					right: -18rpx;
					background-color: #f9f9f9;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}

				&-btn {
					padding: 48rpx;
				}
			}
		}

		.balance {
			width: 100%;
			padding: 20rpx 0;
			border-radius: 20rpx;
			background-color: #fff;
			color: #333;
			box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.08), 0px 2px 20px rgba(0, 0, 0, 0.04);

			&_money {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 28rpx;
					padding-top: 40rpx;
					margin-bottom: 10rpx;
				}

				.money {
					font-size: 48rpx;
					display: flex;
					align-items: center;
					margin: 24rpx 0 40rpx;
				}
			}

			.btns {
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding-bottom: 54rpx;
			}
		}

		.tips {
			font-size: 24rpx;
			color: #999;
			margin-top: 24rpx;
			// text-align: center;
		}

		.modal_content {
			width: 100%;
			padding: 20rpx 0;

			.radio_item {
				width: 100%;
				padding: 30rpx;
				border-radius: 16rpx;
				border: 2rpx solid #414571;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}
			}

			.active {
				border-color: #333;

			}
		}
	}

	/deep/ .cancel_btn {
		color: #999;
		border: 1px solid #999;
	}

	.swiper {
		width: 100%;
		// height: calc(100vh - 88rpx - 82rpx);
		padding: 44rpx;
		box-sizing: border-box;
		color: #333;
	}

	.list_item {
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		// box-shadow:0 0px 2px 2px rgba(0, 0, 0, 0.08);
		border-bottom: 1px solid #eee;

		&_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			margin-bottom: 28rpx;

			&_title {
				font-size: 32rpx;
			}
		}

		&_group {
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			margin-bottom: 20rpx;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}

			&_label {
				width: 120rpx;
				color: #333;
				margin-right: 35rpx;
				text-align: left;
				font-size: 28rpx;
			}

			&_value {
				width: calc(100% - 120rpx);
				color: #333;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 28rpx;
			}
		}
	}
</style>
